<template>
  <div>
    <div>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/Home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>照料服务</el-breadcrumb-item>
        <el-breadcrumb-item>护理级别</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <!-- 护理级别区域-->
    <div class="left">
      <el-table
          :data="careVoList"
          style="width: 100%;font-size: small"
          :header-cell-style="{background:'#eef1f6',color:'#606266'}"
          highlight-current-row
          @row-click="selectCarelevel"
          >
        <el-table-column prop="level" label="护理级别" ></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
                size="mini"
                type="primary"
                @click="openModifyCare(scope.row)">修改
            </el-button>
            <el-button
                size="mini"
                type="danger"
                @click="removeCare(scope.row.id)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-button
          style="margin: 10px 70px;text-align: center"
          size="small"
          type="primary"
          @click="openAddCare()">添加护理级别
      </el-button>

    </div>


    <!--护理级别明细区域-->
    <div class="right">

      <el-descriptions class="margin-top" title="" :column="2" border >
        <el-descriptions-item label="护理级别">{{careVo2.level}}</el-descriptions-item>
        <el-descriptions-item label="护理费用">￥{{careVo2.cprice}}元</el-descriptions-item>
        <el-descriptions-item label="级别说明" :span="2">{{careVo2.explained}}</el-descriptions-item>
      </el-descriptions>

       <el-table
          :data="careVo2.careCareprojectVos"
          style="width: 100%"
          :row-class-name="tableRowClassName">
<!--        <el-table-column prop="id" label="#" ></el-table-column>  careVo2.careCareprojectVos-->
         <el-table-column type="index" label="#" ></el-table-column>
        <el-table-column prop="careprojectVo.pname" label="项目名称" ></el-table-column>
        <el-table-column  label="服务次数" >
          <template slot-scope="scope">
            {{scope.row.servicenum}} {{scope.row.unit}}
          </template>
        </el-table-column>
        <el-table-column prop="careprojectVo.typename" label="所属类别"></el-table-column>
         <el-table-column prop="careprojectVo.description" label="项目介绍"></el-table-column>
       </el-table>

<!--      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="pagelist"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
      ></el-pagination>-->

    </div>

      <!--添加-->
    <el-dialog title="添加护理级别" :visible.sync="addFormVisible"  @close="closeAddForm" :close-on-click-modal="false" width="80%">
      <el-form ref="addFormRef" :rules="addFormRules" :model="addForm"  style="margin-left: 10px;width: 100%">

        <el-form-item label="护理级别" prop="level">
          <el-input placeholder="请输入护理级别" v-model="addForm.level"></el-input>
        </el-form-item>
        <el-form-item label="护理费用" prop="cprice">
          <el-input placeholder="请输入护理费用" v-model="addForm.cprice"></el-input>
        </el-form-item>
        <el-form-item label="级别说明" prop="desc">
          <el-input type="textarea" placeholder="请输入说明" v-model="addForm.explained"></el-input>
        </el-form-item>

        <el-form-item label="服务项目" >
          <el-button type="primary" size="mini" @click="innerprojectVisible=true">选择项目</el-button>
          <el-button type="warning"  size="mini" @click="cancelSelectBeach()">批量删除</el-button>
        </el-form-item>
          <el-table
              style="width:1500px"
              ref="multipleTable"
              tooltip-effect="dark"
              @selection-change="handleSelectionChange"
              :data="addForm.careCareprojectVos"
              :row-class-name="tableRowClassName">
            <el-table-column
                type="selection">
            </el-table-column>

<!--            <el-table-column
                label="#"
                type="index">
            </el-table-column>-->
            <el-table-column prop="careprojectVo.pname" label="项目名称" ></el-table-column>
            <el-table-column prop="servicenum" label="服务次数">
              <template slot-scope="scope">
                <el-form-item  :prop="'careCareprojectVos.'+scope.$index+'.servicenum'" :rules="addFormRules.servicenum">
                  <el-input v-model="scope.row.servicenum" size="mini" :min="1" :max="100" ></el-input>

                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column prop="unit" label="单位">
              <template slot-scope="scope">
                <el-form-item  :prop="'careCareprojectVos.'+scope.$index+'.unit'" :rules="addFormRules.unit">
                  <el-select v-model="scope.row.unit" placeholder="单位">
                    <el-option label="请选择" value=""></el-option>
                    <el-option  value="次/天"></el-option>
                    <el-option  value="次/周"></el-option>
                    <el-option  value="次/月"></el-option>
                  </el-select>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column prop="careprojectVo.typename" label="所属类别"></el-table-column>
            <el-table-column label="操作" width="90">
              <template slot-scope="scope">
                <el-button
                    size="mini"
                    type="primary"
                    @click="cancelSelectOne(scope.row.careprojectVo.id)">删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button  @click="closeAddForm">取 消</el-button>
        <el-button type="primary" @click="addCare">确 定</el-button>
      </div>
    </el-dialog>



    <!--修改-->
    <el-dialog title="修改护理级别" :visible.sync="editFormVisible"  @close="closeEditForm" :close-on-click-modal="false" width="80%">
      <el-form ref="editFormRef" :rules="editFormRules" :model="editForm"   style="margin-left: 10px;width: 100%">

        <el-form-item label="护理级别" prop="level">
          <el-input placeholder="请输入护理级别" v-model="editForm.level"></el-input>
        </el-form-item>
        <el-form-item label="护理费用" prop="cprice">
          <el-input placeholder="请输入护理费用" v-model="editForm.cprice"></el-input>
        </el-form-item>
        <el-form-item label="级别说明" prop="explained">
          <el-input type="textarea" placeholder="请输入说明" v-model="editForm.explained"></el-input>
        </el-form-item>

        <el-form-item label="服务项目">
          <el-button type="primary" size="mini" @click="innerprojectVisible=true">选择项目</el-button>
          <el-button type="warning"  size="mini" @click="cancelSelectBeach()">批量删除</el-button>
        </el-form-item>
          <el-table
              style="width:1500px"
              ref="multipleTable"
              tooltip-effect="dark"
              @selection-change="handleSelectionChange"
              :data="editForm.careCareprojectVos"
              :row-class-name="tableRowClassName"
          >
            <el-table-column
                type="selection">
            </el-table-column>

            <!--            <el-table-column
                            label="#"
                            type="index">
                        </el-table-column>-->
            <el-table-column prop="careprojectVo.pname" label="项目名称" ></el-table-column>
            <el-table-column label="服务次数">
              <template slot-scope="scope">
                <el-form-item  :prop="'careCareprojectVos.'+scope.$index+'.servicenum'" :rules="editFormRules.servicenum">
                <el-input v-model="scope.row.servicenum" size="mini" :min="1" :max="100" ></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column  label="单位">
              <template slot-scope="scope">
                <el-form-item  :prop="'careCareprojectVos.'+scope.$index+'.unit'" :rules="editFormRules.unit">
                <el-select v-model="scope.row.unit" placeholder="单位">
                  <el-option label="请选择" value=""></el-option>
                  <el-option  value="次/天"></el-option>
                  <el-option  value="次/周"></el-option>
                  <el-option  value="次/月"></el-option>
                </el-select>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column prop="careprojectVo.typename" label="所属类别"></el-table-column>
            <el-table-column label="操作" width="90">
              <template slot-scope="scope">
                <el-button
                    size="mini"
                    type="primary"
                    @click="cancelSelectOne(scope.row.careprojectVo.id)">删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button  @click="closeEditForm">取 消</el-button>
        <el-button type="primary" @click="editCare">确 定</el-button>
      </div>
    </el-dialog>

    <!--选择项目明细对话框-->
    <el-dialog
        width="75%"
        title="选择长者信息"
        :visible.sync="innerprojectVisible"
        append-to-body>
    <div>
      <!--搜素-->
            <el-select v-model="caretypeId" placeholder="请选择所属类型" style="float: left" @change="search">
              <el-option label="请选择" value=""></el-option>
              <el-option :label="c.typename" :value="c.id" v-for="c in caretypeList"></el-option>
            </el-select>
            <el-input  style="width: 300px;margin-left: 30px" placeholder="服务项目名称" clearable v-model="pname" @change="search" @clear="search">
              <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
            </el-input>

      <!-- 项目展示-->
      <el-table
          :data="CareProjectList"
          style="width: 100%;text-align: center;margin-left: 30px"
          :row-class-name="tableRowClassName">
        <el-table-column prop="id" label="#" width="80px"></el-table-column>
        <el-table-column prop="pname" label="项目名称" ></el-table-column>
        <el-table-column prop="typename" label="所属类别"></el-table-column>
        <el-table-column prop="description" label="简介"></el-table-column>

        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
                style="margin-left: 10px;margin-top: 5px"
                size="mini"
                type="primary"
                @click="selectOfcareProject(scope.row)">选择
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="pagelist"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
      ></el-pagination>
    </div>
    </el-dialog>


  </div>
</template>

<script>
export default {
  name: "careproject",
  data(){
    return{
      careVo2:{},
      careList:[],
      careId:0,


     careVoList:[],
     carecareprojectvoList:[],
      careVoshow:{},

      //添加，修改
      selectProjectList:[],
      checkboxList:[],


      addForm:{},
      addFormRules:{
        level:[{required: true, message: "不能为空", trigger: 'blur'}],
        cprice:[{required: true, message: "不能为空", trigger: 'blur'},
                {pattern:/^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/,message: "必须大于0", trigger: 'blur'}],
        unit:[{required: true, message: "不能为空", trigger: 'change'}],
        servicenum:[{required: true, message: "不能为空", trigger: 'blur'},
                     {pattern: /^\+?[1-9]\d*$/, message: "必须是大于0的整数", trigger: 'blur'}],
      },
      addFormVisible:false,

      editForm:{careCareprojectVos:[]},
      editFormRules:{
        level:[{required: true, message: "不能为空", trigger: 'blur'}],
        cprice:[{required: true, message: "不能为空", trigger: 'blur'},
                {pattern:/^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/,message: "必须大于0", trigger: 'blur'}],
        unit:[{required: true, message: "不能为空", trigger: 'change'}],
        servicenum:[{required: true, message: "不能为空", trigger: 'blur'},
          {pattern: /^\+?[1-9]\d*$/, message: "必须是大于0的整数", trigger: 'blur'}],
      },
      editFormVisible:false,


      //项目选择对话框
      innerprojectVisible:false,
      CareProjectList:[],
      caretypeList:[],
      caretypeId:'',
      pname:'',
      pageNum: 1,
      pageSize: 6,
      pagelist: [2, 3, 6, 8],
      total: 0,

    }
  },
  methods:{
    //鼠标选中行
    selectCarelevel: function (row) {
      this.careVoshow=row;
      this.carecareprojectvoList=row.careCareprojectVos;
        this.careId=row.id;
        this.initCarVo2();

    },
    initCarVo2(){
      this.$axios.get("/care/searchCareVoByCid/",{
        params:{
          careId:this.careId,
        }
      }).then((res) => {
        if (res.data.code == 200) {
          this.careVo2 = res.data.data;
        } else {
          this.$message({
            message: res.data.msg,
            type: 'error',
            duration: 1000
          });
        }
      })
    },
    //打开修改框
    openModifyCare(carevo){
    this.editFormVisible=true;
    this.editForm=carevo;
    this.selectProjectList=carevo.careCareprojectVos;
    },

    //取消修改，关闭修改对话框
    closeEditForm(){
    this.editFormVisible=false;
    this.$refs.editFormRef.resetFields();
    },
    //确定修改
    editCare(){
      if(!this.selectProjectList.length>0){
        alert("请至少选择一个服务项目！");
        return;
      }
      this.editForm.careCareprojectVos=this.selectProjectList;
      this.careId=this.editForm.id;
      this.$refs.editFormRef.validate((valid)=>{
      if(!valid){return;}
      this.$axios.post("/care/modify",this.editForm).then((res)=>{
        if(res.data.code==200){
          this.$message({
            type: "success",
            message: res.data.msg,
            duration: 1000
          })
          this.editFormVisible=false;

          this.initCarevoList();
          this.initCarVo2();
          this.carecareprojectvoList=this.selectProjectList;
         // this.initCareList();
          this.$refs.editFormRef.resetFields();
        }else {
          this.$message({
            type: "error",
            message: res.data.msg,
            duration: 1000
          })
        }
      });
      })
    },
    //打开添加框
    openAddCare(){
      this.addForm={};
      this.selectProjectList=[];
      this.addFormVisible=true;
    },
    //取消添加
    closeAddForm(){
      this.addFormVisible=false;
    },
    //确定添加
    addCare(){
      if(!this.selectProjectList.length>0){
        alert("请至少选择一个服务项目！");
        return;
      }
        this.addForm.careCareprojectVos=this.selectProjectList;
       // this.$refs.addFormRef.validateField("unit")
        this.$refs.addFormRef.validate((valid)=>{
        if(!valid){return;}
        this.$axios.post("/care/add",this.addForm).then((res)=>{
          if(res.data.code==200){
            this.$message({
              type: "success",
              message: res.data.msg,
              duration: 1000
            })
            this.initCarevoList();
            this.addFormVisible=false;

          }else {
            this.$message({
              type: "error",
              message: res.data.msg,
              duration: 1000
            })
          }
        });
      })
    },

    //批量删除选择
    cancelSelectBeach(){
      for(let i=0;i<this.checkboxList.length;i++){
        let id=this.checkboxList[i].careprojectVo.id;
        this.selectProjectList.forEach((item,index)=>{
          if(this.selectProjectList[index].careprojectVo.id==id){
            this.selectProjectList.splice(index,1);
          }
        })
      }
      this.addForm.careCareprojectVos=this.selectProjectList;
      this.editForm.careCareprojectVos=this.selectProjectList;
    },
    //删除单个选择
    cancelSelectOne(projectId){
      //console.log(this.selectProjectList.length);
      for(let i=0;i<this.selectProjectList.length;i++){
        //console.log(this.selectProjectList[i].careprojectVo.id);
        if(this.selectProjectList[i].careprojectVo.id==projectId){
          this.selectProjectList.splice(i,1);
        }
      }
      this.addForm.careCareprojectVos=this.selectProjectList;
      this.editForm.careCareprojectVos=this.selectProjectList;
    },
    //点击选择项目时，加近护理级别的项目集合里
    selectOfcareProject(CareProjectVo){
      for(let c of this.selectProjectList) {
        if (c.careprojectVo.id == CareProjectVo.id) {
          this.$message({
            message: '您已经添加过此项目',
            type: 'error',
            duration: 1000
          });
          return;
        }
      }
        let careCareproject={careprojectVo: CareProjectVo,servicenum:'',unit:''};
        this.selectProjectList.push(careCareproject);
      this.addForm.careCareprojectVos=this.selectProjectList;
      this.editForm.careCareprojectVos=this.selectProjectList;
    },
    //添加--复选框
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.checkboxList = val;
      console.log(val);
    },
    //删除
    removeCare(careid){
      //类型删除
        this.$confirm("你确定要删除吗？将终止此护理级别的使用", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          let url = "/care/remove/" + careid;
          this.$axios.get(url).then((res) => {
            if (res.data.code == 200) {
              this.$message({
                type: "success",
                message: res.data.msg,
                duration: 1000
              })
              this.initCarevoList();
              this.carecareprojectvoList=[];
            } else {
              this.$message({
                type: "error",
                message: res.data.msg,
                duration: 1200
              })
            }
          });
        }).catch(() => {
          this.$message({
            type: "info",
            message: "取消成功"
          })
        })
    },

    initCarevoList(){
      this.$axios.get("/care/searchList").then((res) => {
        if (res.data.code == 200) {
          this.careVoList = res.data.data;
          console.log("=====================================================")
          console.log(this.careVoList);
        } else {
          this.$message({
            message: res.data.msg,
            type: 'error',
            duration: 1000
          });
        }
      })
    },

    initCareList(){
      this.$axios.get("/care/searchCareAll").then((res) => {
        if (res.data.code == 200) {
          this.careList = res.data.data;
        } else {
          this.$message({
            message: res.data.msg,
            type: 'error',
            duration: 1000
          });
        }
      })
    },
    //表格属性（调样式）
    setRowStyle(row) {
      if (row.row.isPart == true) {
        return 'color:blue;'
      }
    },
    tableRowClassName(row,index){

    },

    //项目明细选择对话框
    handleSizeChange(newSize) {
      this.pageNum = 1;
      this.pageSize = newSize;
      this.initCareProjectList();
    },
    handleCurrentChange(newPage) {
      this.pageNum = newPage;
      this.initCareProjectList();
    },
    search() {
      this.pageNum = 1;
      this.initCareProjectList();
    },

    initCareProjectList(){
      this.$axios.get("/careproject/searchList", {
        params: {
          now: this.pageNum,
          size: this.pageSize,
          caretypeId: this.caretypeId,
          pname: this.pname,
        }
      }).then((res) => {
        if (res.data.code == 200) {
          this.CareProjectList = res.data.data.list;
          this.total = res.data.data.total;
          this.pageNum = res.data.data.pageNum;
          this.pageSize = res.data.data.pageSize;
        } else {
          this.$message({
            message: res.data.msg,
            type: 'error',
            duration: 1000
          });
        }
      })
    },
    initCaretypeList(){
      this.$axios.get("/careType/alltype").then((res) => {
        if (res.data.code == 200) {
          this.caretypeList = res.data.data;
        } else {
          this.$message({
            message: res.data.msg,
            type: 'error',
            duration: 1000
          });
        }
      })
    },
  },
  created() {
    this.initCarevoList();
    this.initCareProjectList();
    this.initCaretypeList();
    this.initCareList();
  }
}
</script>

<style >
el-table el-table-column.current-row>el-tab-pane{
  background-color: #0077ff;
}
  .left {
    background-color: white;
    /*background-color: #f1f4f6;*/
    width: 30%;
    float: left;
    margin-left: 3px;
    height: 800px;
  }
  .right {
    /*background-color: orange;*/
    width: 68%;
    float: left;
    height: 800px;
    margin-left: 11px;
  }
</style>
